<template>
 <div class="home-pages">
    <el-carousel height="720px">
      <el-carousel-item v-for="(item,i) in bannerList" :key="i">
        <img class="banner-img" src="@/assets/image/banner-img.png" alt="">
        <div class="banner-text">
          <div>来了就引荐生意</div>
          <div>Come for business</div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <div class="business-box">
        <div class="business-cont">
          <div class="business-heder">
            <img class="business-heder-img" src="@/assets/image/business-title.png" alt="">
            <div class="business-heder-tab">
                <div class="tab-item" v-for="(item,i) in tabList" :key="i">{{ item.name }}</div>
            </div>
          </div>
          <div class="business-list">
              <div class="cont-item" v-for="item in 6" :key="item">
                  <business-item ></business-item>
              </div>
          </div>
        </div>
    </div>

    <!-- 介绍 -->
    <div class="introduce-box">
      <div class="introduce-cont">
        <div class="introduce-cont-text">
          <img class="logo-img"  src="@/assets/image/logo-2.png" alt="">
          <div class="text-cont">
            菁商会EBC是一家覆盖全球的社交人脉和商务引荐组织，环球商务精准对接平台，是集“生长、生意、生活”为一体的价值生态圈。由2019年高菁会(高尔夫菁英球会)发展而来。会员秉承“先舍后得”的理念和承诺，帮助彼此发展业务网络，实现“共建、共享、共商、共赢”的核心价值；“来了就引荐生意、拒绝无效社交”、“线上互动、线下推动”精准高效；每周一会，一对一走访，促成会员之间深度连接，互帮互助、相互引荐生意。EBC会员还可获得专业的商业培训，提升商业演讲、谈判，人脉对接、获得商务引荐等能力；还可获得同行交流及与全球会员拓展人脉和开展业务的机会……
          </div>
          <div class="introduce-cont-tip">
            <div class="tip-item">社交人脉</div>
            <div class="tip-item">生意人脉</div>
            <div class="tip-item">资源对接</div>
            <div class="tip-item">异业联合</div>
          </div>
        </div>
        <div class="introduce-img">
          <img class="business-heder-img" src="@/assets/image/test-4.png" alt="">
        </div>
      </div>
    </div>

    <!-- 数量 -->
    <div class="num-box">
      <div class="num-box-cont">
        <img class="num-box-img" src="@/assets/image/num-title.png" alt="">
        <div class="amount-num">518,954,689,985</div>
        <div class="statistical-box">
          <div class="statistical-item item-1">
            <div class="statistical-item-label">引荐次数</div>
            <div class="statistical-item-val">54,689,985</div>
          </div>
          <div class="statistical-item item-2">
            <div class="statistical-item-label">会员数</div>
            <div class="statistical-item-val">45,089</div>
          </div>
          <div class="statistical-item item-3">
            <div class="statistical-item-label">分会数</div>
            <div class="statistical-item-val">6886</div>
          </div>
        </div>
        <div class="entrance-box">
          <div class="entrance-box-item">
            <div class="entrance-box-item-cont cont-1">
              <div class="title-1">我要</div>
              <div>入会</div>
            </div>
          </div>
          <div class="entrance-box-item">
            <div class="entrance-box-item-cont cont-2">
              <div class="title-1">我要</div>
              <div>参会</div>
            </div>
          </div>
          <div class="entrance-box-item">
            <div class="entrance-box-item-cont cont-3">
              <div class="title-1">我要</div>
              <div>创会</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 价值观 -->
    <div class="jzg-box">
      <div class="jzg-cont">
        <div class="jzg-cont-head">
          <img class="jzg-title" src="@/assets/image/jzg-title.png" alt="">
          <div class="jzg-text">
            <div>【菁商会】12345核心价值观，是多年菁商文化的凝练和沉淀；</div>
            <div>一直秉承“先付出，后收获”的“利他”思维——把爱带来，把生意带走！</div>
          </div>
        </div>
        <img class="jzg-cont-img" src="@/assets/image/jzg-img.png" alt="">
      </div>
    </div>

    <!-- 优势 -->
    <div class="advantage-box">
      <div class="advantage-cont">
        <div class="advantage-title">菁商会   /优势</div>
        <div class="list-cont">
          <div class="list-item" v-for="(item,i) in advantageList" :key="i">
              <div class="img-box">
                <img :src="item.img" alt="">
              </div>
              <div class="item-title">{{ item.name }}</div>
              <div class="item-cont">{{ item.cont }}</div>
          </div>
        </div>
      </div>
    </div>
 </div>
</template>

<script setup lang="ts">
import { reactive  } from 'vue'
import businessItem from '@/components/business-item/business-item.vue'
import icon1 from '@/assets/image/icon-1.png'
import icon2 from '@/assets/image/icon-2.png'
import icon3 from '@/assets/image/icon-3.png'
import icon4 from '@/assets/image/icon-4.png'
import icon5 from '@/assets/image/icon-5.png'
import icon6 from '@/assets/image/icon-6.png'
// import util from '@/util/utils'

// import {businessItem} from '../components/business-item/business-item.vue'
const bannerList = reactive([
  {
    name:'在线捐助',
    // src:util.getAssetsFile('banner-img.png')
  },
])
const tabList = reactive([
  {
    name:'菁商公益',
    id:1
  },
  {
    name:'工程管理',
    id:2
  },
  {
    name:'工程测试',
    id:3
  },
  {
    name:'工程测试',
    id:4
  },
  {
    name:'工程检验',
    id:5
  },
  {
    name:'工程管理',
    id:6
  },
])
const advantageList = reactive([
  {
    name:'大量活动',
    img:icon1,
    cont:'分会每周1例会，每月1聚会，每季1展会，每年2年会，还有大量不定期活动，互动性强；'
  },
  {
    name:'精准对接',
    img:icon2,
    cont:'精准对接商务资源，来了就谈生意，快捷高效；相互引荐，获得更多的生意机会和成交；'
  },
  {
    name:'分会网络',
    img:icon3,
    cont:'每周都有各地分会不断成立，全球广泛的分会会员网络，把你的生意和人脉做到全世界；'
  },
  {
    name:'AI名片社交',
    img:icon4,
    cont:'平台特有的AI电子名片自动营销裂变系统；商务人脉连接器和营销利器；智能营销对接；'
  },
  {
    name:'强大平台',
    img:icon5,
    cont:'功能强大、使用便捷的管理系统，商务人脉和资源一站精准对接，省心省力，轻松无忧；'
  },
  {
    name:'个人成长',
    img:icon6,
    cont:'终生学习是每一位菁商的信念和追求；菁商学院；金牌讲师团；321强大专业培训体系；'
  },
])
</script>

<style lang="scss" scoped>
  /* 定义一个名为breathe的动画 */
  @keyframes breathe {
    0% {
      transform: scale(1); /* 动画开始时的状态 */
    }
    50% {
      transform: scale(1.05); /* 动画中间时候的状态，放大10% */
    }
    100% {
      transform: scale(1); /* 动画结束时的状态，恢复原状 */
    }
  }
  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
    .home-pages {
      .el-carousel__item {
        position: relative;
      }
      .banner-text {
        font-family: SourceHanSansSC-bold;
        font-size: 72px;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
        .banner-img {
            width: 100%;
        }

        .business-box {
            width: 100%;
            background-color: #fff;
            height: 840px;
            padding-top: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
            .business-cont {
              width: 1200px;
              .business-heder {
                display: flex;
                &-tab {
                    display: flex;
                    align-items: center;
                    margin-left: 280px;
                    .tab-item {
                        margin-right: 20px;
                        cursor: pointer;
                    }
                }
            }
            .business-list {
                display: flex;
                flex-wrap: wrap;
                margin-top: 30px;
                .cont-item {
                    margin-right: 25px;
                    margin-bottom: 30px;
                    &:nth-child(3n) {
                      margin-right: 0;
                    }
                }
            }
            }
        }

        .introduce-box {
          width: 100%;
          height: 545px;
          background-color: #EFEFEF;
          display: flex;
          align-items: center;
          justify-content: center;
          .introduce-cont {
            display: flex;
            &-text {
              width: 840px;
              height: 385px;
              background-color: #D70E18;
              padding: 55px 250px 0 60px;
              .logo-img {
                height: 52px;
              }
              .text-cont {
                font-size: 14px;
                color: #fff;
                line-height: 25px;
              }
            }
            &-tip {
              font-size: 20px;
              color: #fff;
              display: flex;
              align-items: center;
              margin-top: 11px;
              .tip-item {
                width: 115px;
                height: 29px;
                line-height: 29px;
                text-align: center;
                border-right: 2px solid #fff;
                &:last-child {
                  border: none;
                }
              }
            }
          }
          .introduce-img {
            width: 530px;
            height: 295px;
            background-color: #fff;
            box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.4);
            padding: 3px;
            margin: 45px 0 0 -208px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        
        .num-box {
          width: 100%;
          height: 986px;
          padding-top: 47px;
          display: flex;
          justify-content: center;
          &-cont {
            width: 1217px;
            background: url(@/assets/image/27.png) no-repeat;
            background-size: 100% 100%;
            .num-box-img {
              width: 414px;
            }
            .amount-num {
              color: rgba(255,0,0,1);
              font-size: 138px;
              font-weight: bold;
              text-align: center;
              font-family: PingFangSC-regular;
              animation: blink 2s ease-in-out infinite;
            }
            .statistical-box {
              display: flex;
              align-items: center;
              padding: 0 35px;
              .item-1 {
                width: 44%;
              }
              .item-2 {
                width: 31%;
                position: relative;
                &:after {
                  content: '';
                  position: absolute;
                  top: 50%;
                  left: 0;
                  transform: translate(0,-50%);
                  width: 4px;
                  height: 155px;
                  background-color: rgba(187,187,187,1);;
                }
                &::before {
                  content: '';
                  position: absolute;
                  top: 50%;
                  right: 0;
                  transform: translate(0,-50%);
                  width: 4px;
                  height: 155px;
                  background-color: rgba(187,187,187,1);;
                }
              }
              .item-3 {
                width: 25%;
              }
              .statistical-item {
                color: #000;
                font-size: 36px;
                margin-top: 10px;
                &-label {
                  text-align: center;
                }
                &-val {
                  text-align: center;
                  font-size: 88px;
                  font-family: AlibabaPuHui-black;
                  animation: breathe 2s ease-in-out infinite;
                }
              }
            }
            .entrance-box {
              display: flex;
              align-items: center;
              justify-content: space-around;
              margin-top: 58px;
              &-item {
                width: 288px;
                height: 288px;
                box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.4);
                background-color: #F5F5F5;
                border-radius: 50%;
                padding: 10px;
                cursor: pointer;
                .cont-1 {
                  background: #FF0000;
                }
                .cont-2 {
                  background: #DE747F;
                }
                .cont-3 {
                  background: #9C5333 100%;
                }
                &-cont {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  font-size: 88px;
                  color: #fff;
                  font-weight: bold;
                  border-radius: 50%;
                  .title-1 {
                    font-size: 48px;
                    font-weight: normal;
                  }
                }
              }
            }
          }
        }

        .jzg-box {
          width: 100%;
          height: 821px;
          background-color: #EFEFEF;
          padding-top: 32px;
          .jzg-cont {
            width: 1140px;
            margin: 0 auto;
            .jzg-cont-head {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .jzg-title {
                width: 456px;
              }
              .jzg-text {
                font-size: 14px;
                text-align: right;
                font-family: PingFangSC-regular;
              }
            }
            .jzg-cont-img {
              width: 100%;
            }
          }
        }

        .advantage-box {
          width: 100%;
          height: 730px;
          background-color: #fff;
          padding-top: 47px;
          .advantage-cont {
            width: 1144px;
            margin: 0 auto;
            .advantage-title {
              font-weight: bold;
              font-size: 36px;
              font-family: PingFangSC-bold;
              color: #000;
            }
            .list-cont {
              display: flex;
              align-items: center;
              justify-content: space-between;
              flex-wrap: wrap;
              margin-top: 45px;
              .list-item {
                width: 300px;
                height: 234px;
                box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.4);
                font-family: Roboto;
                border: 1px solid rgba(221,221,221,1);
                background-color: rgba(255,255,255,1);
                margin-bottom: 45px;
                border-radius: 12px;
                padding-top: 30px;
                .img-box {
                  display: flex;
                  justify-content: center;
                }
                .item-title {
                  color: rgba(231,89,39,1);
                  font-size: 28px;
                  text-align: center;
                  font-family: SourceHanSansSC-bold;
                  font-weight: bold;
                }
                .item-cont {
                  margin-top: 10px;
                  padding: 0 26px;
                  line-height: 22px;
                  color: rgba(79,79,79,1);
                  font-size: 18px;
                  text-align: center;
                  font-family: SourceHanSansSC-regular;
                }
              }
            }
          }
        }
    }
</style>
